<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />

    <style>
      body { font-family: Tahoma, Geneva, sans-serif; }
    </style>

    <!-- colyseus.js client -->
    <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.14.0/dist/colyseus.js"></script>

    <style type="text/css">
      .player {
        width: 100px;
        height: 100px;
        position: absolute;
        padding-top: 24px;
        box-sizing: border-box;
        left: 0;
        top: 0;
      }
    </style>

  </head>
  <body>
    <h1>
      <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
    </h1>

    <p>This example shows how to use custom data structures in your room's state.</p>

    <strong>commands</strong><br>

    <button onclick="up()">up</button>
    <button onclick="down()">down</button>
    <br />
    <button onclick="left()">left</button>
    <button onclick="right()">right</button>

    <script>
        var host = window.document.location.host.replace(/:.*/, '');

        var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
        var room;
        client.joinOrCreate("state_handler").then(room_instance => {
            room = room_instance

            var players = {};
            var colors = ['red', 'green', 'yellow', 'blue', 'cyan', 'magenta'];

            // listen to patches coming from the server
            room.state.players.onAdd = function (player, sessionId) {
                var dom = document.createElement("div");
                dom.className = "player";
                dom.style.left = player.x + "px";
                dom.style.top = player.y + "px";
                dom.style.background = colors[Math.floor(Math.random() * colors.length)];
                dom.innerText = "Player " + sessionId;

                player.onChange = function (changes) {
                    dom.style.left = player.x + "px";
                    dom.style.top = player.y + "px";
                }

                players[sessionId] = dom;
                document.body.appendChild(dom);
            }

            room.state.players.onRemove = function (player, sessionId) {
                document.body.removeChild(players[sessionId]);
                delete players[sessionId];
            }

            
            room.onMessage("hello", (message) => {
                console.log(message);
            });

            window.addEventListener("keydown", function (e) {
                if (e.which === 38) {
                    up();

                } else if (e.which === 39) {
                    right();

                } else if (e.which === 40) {
                    down();

                } else if (e.which === 37) {
                    left();
                }
            });

        });

        function up () {
            room.send("move", { y: -1 });
        }

        function right () {
            room.send("move", { x: 1 });
        }

        function down () {
            room.send("move", { y: 1 })
        }

        function left () {
            room.send("move", { x: -1 })
        }


    </script>
  </body>
</html>
